<!-- 市场结算生成报表 -->
<template>
    <div class="marketSettlementReport">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/marketSettlement' }">市场结算</el-breadcrumb-item>
            <el-breadcrumb-item>生成报表</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
            <p>选择报表月份</p>
            <el-date-picker
                    v-model="cmonth"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                    @change="clearselectedInterval"
            >
            </el-date-picker>
        </div>
        <table border="1">
            <tr>
                <th>报表类型</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>市场结算</td>
                <td><a style="text-decoration: none" href="javascript:void(0);" title="" @click="openbindstrandard()">{{bindtips}}</a>
                </td>
            </tr>
        </table>
        <div style="margin: 40px 0 0 180px">
            <el-button type="primary" @click="generateReport()">生成报表</el-button>
            <el-button type="primary" @click="cancel()">取消</el-button>
        </div>
        <el-dialog
                title="选择市场结算标准"
                :visible.sync="selectDialogVisible"
                width="800px"
                class="dialog"
                center>
            <div>
                <el-row :span="24" :gutter="20">
                    <el-col :span="18">
                        <el-input
                                placeholder="请输入内容"
                                prefix-icon="el-icon-search"
                                size="normal"
                                v-model="version">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button size="normal" type="primary" @click="searchlist">查询</el-button>
                    </el-col>
                </el-row>

                <div class="mt20" style="margin-left: 60px;height: 400px;overflow-y: auto;">
                    <div class="selectedInterval-item" v-for="item in standardlist" @click="selectradio(item.id)">
                        <div>
                            <el-radio @change="selectradio(item.id)" :label="item.id" v-model="selectedInterval" key="item.id" :value="item.id">
                                &nbsp;
                            </el-radio>
                        </div>
                        <div class="itemwrapper">
                            <div>
                                <div>提取标准：{{item.extractStandard | filterstand}}</div>
                                <div>佣金来源： {{item.commissionSource | filterSource}}</div>
                                <div>提取规则： {{item.extractCategory | filterExtractionRule}}</div>
                                <div>计提节点：{{item.calculationNodeList | filtercalculationNode}}</div>
                                <div>版本：{{item.version}}</div>
                            </div>
                            <div style="margin-right: 60px">
                                <a href="javascript:void(0);" title="" @click="reportDetail(item)">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: center !important;">
                <el-button type="primary" @click="ensure">绑定</el-button>
                <el-button @click="selectDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 市场结算标准列表详情 -->
        <el-dialog
                title="查看详情"
                :visible.sync="dialogDetail"
                width="900px"
                class="dialog"
                center>
            <div>
                <div>提取标准：市场结算标准</div>
                <div>佣金来源：合作标签</div>
                <hr/>
                <div>提取规则：基数*比例</div>
                <div>计提节点：{{nodelist | filtercalculationNode}}</div>
                <div class="levelList" v-if="dealRangeList[0].list.length">
                    <div class="levelList-item" v-for="(item,key) in dealRangeList" :key="key">
                        <h3 style="text-align: center">{{item.name}}</h3>
                        <el-table
                                :data="item.list"
                                border
                                highlight-current-row
                                style="width: 500px;margin-top: 20px;">
                            <el-table-column
                                    align="center"
                                    property="content"
                                    label="计提区间">
                            </el-table-column>
                            <el-table-column
                                    property="calculateExtractProportion"
                                    width="150"
                                    align="center"
                                    label="计提比例（%）">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer" style="text-align: center !important;">
                <el-button @click="dialogDetail = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import api from '@/api/apiPath'

    export default {
        data() {
            return {
                bindtips: '绑定标准',
                cmonth: undefined,
                selectDialogVisible: false,
                dialogDetail: false,
                selectDialogInputValue: "",
                selectedInterval: "",
                standardlist: undefined,
                version: undefined,
                pickerOptions: {
                    disabledDate: (time) => {
                        return time.getTime() > Date.now();
                    }
                },
                dealRangeList: [
                    {name: '普通', list: []},
                    {name: '包销', list: []}
                ],
                nodelist: []//查看详情节点list
            }
        },
        created() {
            this.getstandard()
        },
        filters: {
            filterstand(val) {
                if (val == 1) {
                    return '成交标准'
                } else if (val == 2) {
                    return '营收结算标准-月'
                } else if (val == 3) {
                    return '营收结算标准-年 '
                } else if (val == 4) {
                    return '利润结算标准'
                } else if (val == 5) {
                    return '市场结算'
                }
            },
            filterSource(val) {
                if (val == 4) {
                    return '合作标签'
                }
            },
            filterExtractionRule(val) {
                if (val == 1) {
                    return '套*金额'
                } else if (val == 2) {
                    return '基数*比例'
                }
            },
            filtercalculationNode(val) {
                let tempstr = ''
                val.forEach(item => {
                    tempstr += `${item.calculateNodeName}${item.calculateProportion}; `
                })
                return tempstr.substring(0, tempstr.lastIndexOf(';'))
            },
        },
        methods: {
            reportDetail(val) {
                this.dialogDetail = true;
                this.dealRangeList = [
                    {name: '普通', list: []},
                    {name: '包销', list: []}
                ];
                this.$axios.post('commallocation/market/clearing/getById', {id: val.id}).then(res => {
                    let data = res.detailVos;
                    data.forEach((item) => {
                        this.dealRangeList[item.labelType - 1].list.push(item)
                    })
                    this.nodelist = res.calculationNodeList
                })
            },
            clearselectedInterval() {
                this.selectedInterval = ''
                this.bindtips = "绑定标准"
            },
            searchlist() {
                this.getstandard()
            },
            selectradio(val) {
                this.selectedInterval = +val
            },
            getTimeString(timestamp) {
                if (!timestamp) {
                    return ''
                }
                const time = new Date(timestamp)
                let dateStr = ''
                const year = time.getFullYear() //当前完整年数 （4位 1970-？？？）
                const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                dateStr = year + '-' + month
                return dateStr
            },
            generateReport() {
                let month = this.getTimeString(this.cmonth)
                if (month == '') {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                    return
                }
                this.$confirm('是否确认生成报表?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post(api.COMMALLOCATIONMONTHREPORT, {month: month}).then((res) => {
                        if (res && res.data.code == 200) {
                            this.$message({
                                message: '生成报表成功',
                                type: 'success'
                            });
                            this.$router.push({path: '/marketSettlement'})
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            cancel() {
                this.$router.push({path: '/marketSettlement'})
            },
            ensure() {
                let month = this.getTimeString(this.cmonth)
                if (this.selectedInterval == '') {
                    this.$message({
                        message: '请绑定标准',
                        type: 'warning'
                    });
                    return
                }
                if (month == '') {
                    this.$message({
                        message: '请选择日期',
                        type: 'warning'
                    });
                    return
                }
                this.axios.post(api.COMMALLOCATIONBINDSTANDARD, {
                    month: month,
                    standardId: this.selectedInterval
                }).then((res) => {
                    if (res && res.data.code == 200) {
                        this.$message({
                            message: '绑定成功！',
                            type: 'success'
                        });

                        let interval = this.selectedInterval
                        let arr = this.standardlist.filter(function (item, index, array) {
                            return item.id == interval
                        })
                        this.bindtips = arr[0].version
                        this.selectDialogVisible = false
                    }
                })
            },
            getstandard() {
                this.axios.post(api.COMMALLOCATIONINDSTANDARDLIST, {
                    pageNum: 1,
                    pageSize: 9999999,
                    version: this.version
                }).then((res) => {
                    if (res && res.data.code == 200) {
                        this.standardlist = res.data.data.data
                    }
                })
            },
            openbindstrandard() {
                this.selectDialogVisible = true
                this.standardlist = []
                this.version = ''
                this.getstandard()
            }
        },
    }
</script>

<style scoped lang="stylus">

    table
        border-collapse: collapse
        margin-top: 50px

    table, td, th
        border: 1px solid #ccc

    td, th
        width: 300px
        height: 40px
        text-align: center

    th
        background-color: rgb(239, 239, 239)

    .marketSettlementReport {
        .levelList {
            display: flex;
            flex-flow: wrap;
            max-height: 450px;
            min-height: 340px;
            padding: 5px;
            overflow-y: auto;
            .levelList-item {
                width: 48%;
                margin-right: 10px;
            }
        }
    }

    .selectedInterval-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;

        > div:first-child {
            width: 50px;
            text-align: center;
        }
        > div:last-child {
            flex: 1;
        }
        .itemwrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-outline: none;
            a {
                text-decoration: none;
            }
        }
    }
</style>
